<template>
	<view class="page">
		<CustomNav :isBack="true" color="#fff" :topBgColor="topBgColor" :title="title"></CustomNav>
		<image :src="cloudStorage+'/detail_bg_zl.png'" class="bg-img" mode="widthFix"></image>
		<view class="info-block">
			<LineTitle :title="title"></LineTitle>
			<view class="search-block">
				<input placeholder="请输入关键词" v-model="keyword" class="search-crl" />
				<view class="btn normal" @click="search">搜索</view>
			</view>
			<view class="info-content">
				<view class="info-item" v-for="item in searchList" :key="item.id"
					@click="navigate('/page_pack/service/detail?name='+item.title+'&id='+item.id)">
					<view class="title">{{item.title}}</view>
					<image :src="cloudStorage+'/right.png'" class="right"></image>
				</view>
			</view>
		</view>
		<Back></Back>
	</view>
</template>

<script>
	import LineTitle from '@/components/LineTitle/LineTitle.vue'
	import Back from '@/components/Back.vue'
	export default {
		components: {
			LineTitle,
			Back
		},
		data() {
			return {
				topBgColor: 'rgba(0,0,0,0)',
				keyword: '',
				title: '',
				searchList: [],
				list: [
				  {
				    id: 1,
				    title: '三产指标构成分析',
				  },
				  {
				    id: 2,
				    title: '三产关键指标比重分析（2024年）',
				  },
				  {
				    id: 3,
				    title: '限上批零住餐企业情况',
				  },
				  {
				    id: 4,
				    title: '三产服务业发展路径分析',
				  },
				  {
				    id: 5,
				    title: '文化旅游产业发展路径分析',
				  },
				  {
				    id: 6,
				    title: '在库规上服务业企业情况',
				  },
				  {
				    id: 7,
				    title: '在库规上服务业企业（2024年）',
				  },
				  {
				    id: 8,
				    title: '交通运输行业数据',
				  },
				  {
				    id: 9,
				    title: '公路里程',
				  },
				  {
				    id: 10,
				    title: '共享单车情况分析（2024年）',
				  },
				  {
				    id: 11,
				    title: '出租车情况（2024年）',
				  },
				  {
				    id: 12,
				    title: '公交车情况（2024年）',
				  },
				  {
				    id: 33,
				    title: '房地产业发展情况',
				  },
				  {
				    id: 13,
				    title: '房产销售情况（2024年在售）',
				  },
				  {
				    id: 14,
				    title: '金融机构基本信息（2024年）',
				  },
				  {
				    id: 15,
				    title: '资质内建税企业清单（2024年）',
				  },
				  {
				    id: 16,
				    title: 'A级旅游景区',
				  },
				  {
				    id: 17,
				    title: 'A级景区景点情况',
				  },
				  {
				    id: 18,
				    title: '文化底蕴情况（物质文化遗产）',
				  },
				  {
				    id: 19,
				    title: '文化底蕴情况（非物质文化遗产）',
				  },
				  {
				    id: 20,
				    title: '文物保护',
				  },
				  {
				    id: 21,
				    title: '地方特色产品',
				  },
				  {
				    id: 22,
				    title: '地方特色小吃',
				  },
				  {
				    id: 23,
				    title: '特产水果',
				  },
				  {
				    id: 24,
				    title: '特产蔬菜',
				  },
				  {
				    id: 25,
				    title: '特产畜禽、水产品统计表',
				  },
				  {
				    id: 26,
				    title: '特色农副产品',
				  },
				  {
				    id: 27,
				    title: '文创产品',
				  },
				  {
				    id: 28,
				    title: '标志性建筑物情况',
				  },
				  {
				    id: 29,
				    title: '大型商超情况',
				  },
				  {
				    id: 30,
				    title: '宾馆饭店情况',
				  },
				  {
				    id: 31,
				    title: '规上餐饮业情况（2024年）',
				  },
				  {
				    id: 32,
				    title: '商务楼宇情况',
				  }
				]
			}
		},
		watch: {

		},
		methods: {
			search() {
				this.searchList = this.list.filter(item => item.title.includes(this.keyword))
			}
		},
		onLoad(e) {
			this.title = e.title
			this.searchList = this.list
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		overflow: hidden;
		min-height: 100vh;
		background-color: #f8f8f8;

		.bg-img {
			width: 100%;
		}

		.info-block {
			position: relative;
			padding: 30rpx;

			.search-block {
				display: flex;
				align-items: center;
				justify-content: space-between;
				background-color: #FFFFFF;
				border-radius: 50rpx;
				height: 80rpx;
				margin-top: 30rpx;
				padding: 0 30rpx;

				.search-crl {
					width: calc(100% - 160rpx);
				}

				.btn {
					width: 140rpx;
					height: 60rpx;
					font-size: 30rpx;
				}
			}

			.info-item {
				margin-top: 30rpx;
				width: 100%;
				height: 140rpx;
				padding: 30rpx;
				border-radius: 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				background-color: #FFFFFF;

				.title {
					font-size: 32rpx;
				}

				.right {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
	}
</style>